<{include file="element/inc_header.html"}>
 
<div class="main-container" id="main-container">
	<script type="text/javascript">
		try{ace.settings.check('main-container' , 'fixed')}catch(e){}
	</script>

	<div class="main-container-inner"> 
 					
		<div class="page-content">
			<div class="page-header">
				<h1>
					数据编辑
					<small>
						<i class="icon-double-angle-right"></i>
						编辑数据 &amp; 列表
					</small>
				</h1>
			</div><!-- /.page-header --> 
						
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
  

					<div class="row">
						<div class="col-xs-12">  
							<div class="step-content row-fluid position-relative" id="step-container">
								<div class="step-pane active" id="step1">
									<h3 class="lighter block green">编辑用户订单数据</h3>

									<form class="form-horizontal" id="sample-form">
										<div class="form-group has-warning">
											<label for="inputWarning" class="col-xs-12 col-sm-2 control-label no-padding-right">订单标题:</label>

											<div class="col-xs-12 col-sm-5">
												<span class="block input-icon input-icon-right">
													<input type="text" id="inputWarning" class="width-100" />
													<i class="icon-leaf"></i>
												</span>
											</div>
											<div class="help-block col-xs-12 col-sm-reset inline">请输入订单标题</div>
										</div>

										<div class="form-group has-error">
											<label for="inputError" class="col-xs-12 col-sm-2 control-label no-padding-right">收件人信息：</label>

											<div class="col-xs-12 col-sm-5">
												<span class="block input-icon input-icon-right">
													<input type="text" id="inputError" class="width-100" />
													<i class="icon-remove-sign"></i>
												</span>
											</div>
											<div class="help-block col-xs-12 col-sm-reset inline"> Error tip help!</div>
										</div>

										<div class="form-group has-success">
											<label for="inputSuccess" class="col-xs-12 col-sm-2 control-label no-padding-right">Input with success</label>

											<div class="col-xs-12 col-sm-6">
												<span class="block input-icon input-icon-right">
													<input type="text" id="inputSuccess" class="width-100" />
													<i class="icon-ok-sign"></i>
												</span>
											</div>
											<div class="help-block col-xs-12 col-sm-reset inline">
												Success tip help!
											</div>
										</div>

										<div class="form-group has-info">
											<label for="inputInfo" class="col-xs-12 col-sm-2 control-label no-padding-right">Input with info</label>

											<div class="col-xs-12 col-sm-6">
												<span class="block input-icon input-icon-right">
													<input type="text" id="inputInfo" class="width-100" />
													<i class="icon-info-sign"></i>
												</span>
											</div>
											<div class="help-block col-xs-12 col-sm-reset inline"> Info tip help!</div>
										</div>

										<div class="form-group">
											<label for="inputError2" class="col-xs-12 col-sm-2 control-label no-padding-right">Input with error</label>

											<div class="col-xs-12 col-sm-6">
												<span class="input-icon block">
													<input type="text" id="inputError2" class="width-100" />
													<i class="icon-remove-sign red"></i>
												</span>
											</div>
											<div class="help-block col-xs-12 col-sm-reset inline"> Error tip help!</div>
										</div> 
										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="email">Email Address:</label>

											<div class="col-xs-12 col-sm-9">
												<div class="clearfix">
													<input type="email" name="email" id="email" class="col-xs-12 col-sm-6" />
												</div>
											</div>
										</div> 

										<div class="space-2"></div>

										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="phone">Phone Number:</label>

											<div class="col-xs-12 col-sm-9">
												<div class="input-group">
													<span class="input-group-addon">
														<i class="icon-phone"></i>
													</span>

													<input type="tel" id="phone" name="phone" />
												</div>
											</div>
										</div>
										
										
										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-2 no-padding-right">Subscribe to</label>

											<div class="col-xs-12 col-sm-9">
												<div>
													<label>
														<input name="subscription" value="1" type="checkbox" class="ace" />
														<span class="lbl"> Latest news and announcements</span>
													</label>
												</div>
												<div>
													<label>
														<input name="subscription" value="2" type="checkbox" class="ace" />
														<span class="lbl"> Product offers and discounts</span>
													</label>
												</div>
											</div>
										</div>
										<div class="space-2"></div>
										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-2 no-padding-right">Gender</label>

											<div class="col-xs-12 col-sm-9">
												<div>
													<label class="blue">
														<input name="gender" value="1" type="radio" class="ace" />
														<span class="lbl"> Male</span>
													</label>
												</div>

												<div>
													<label class="blue">
														<input name="gender" value="2" type="radio" class="ace" />
														<span class="lbl"> Female</span>
													</label>
												</div>
											</div>
										</div>

										<div class="hr hr-dotted"></div>

										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="state">State</label>

											<div class="col-xs-12 col-sm-9">
												<select id="state" name="state" class="select2" data-placeholder="Click to Choose...">
													<option value="">&nbsp;</option>
													<option value="AL">Alabama</option> 
													<option value="SC">South Carolina</option>
													<option value="SD">South Dakota</option>
													<option value="TN">Tennessee</option>
													<option value="TX">Texas</option>
													<option value="UT">Utah</option>
													<option value="VT">Vermont</option>
													<option value="VA">Virginia</option>
													<option value="WA">Washington</option>
													<option value="WV">West Virginia</option>
													<option value="WI">Wisconsin</option>
													<option value="WY">Wyoming</option>
												</select>
											</div>
										</div>

										<div class="space-2"></div>

										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="platform">Platform</label>

											<div class="col-xs-12 col-sm-9">
												<div class="clearfix">
													<select class="input-medium" id="platform" name="platform">
														<option value="">------------------</option>
														<option value="linux">Linux</option>
														<option value="windows">Windows</option>
														<option value="mac">Mac OS</option>
														<option value="ios">iOS</option>
														<option value="android">Android</option>
													</select>
												</div>
											</div>
										</div>
										
										
										<div class="space-2"></div>

										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="phone">文件上传：</label>

											<div class="col-xs-12 col-sm-9"> 
												<script id="editor" type="text/plain" style="width:100%;height:300px;"></script>
 
											</div>
										</div>

										<div class="space-2"></div>

										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="url">Company URL:</label>

											<div class="col-xs-12 col-sm-9">
												<div class="clearfix">
													<input type="url" id="url" name="url" class="col-xs-12 col-sm-8" />
												</div>
											</div>
										</div>

										<div class="hr hr-dotted"></div>


										<div class="space-2"></div>

										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="comment">Comment</label>

											<div class="col-xs-12 col-sm-9">
												<div class="clearfix">
													<textarea class="input-xlarge width-100" name="comment" id="comment"></textarea>
												</div>
											</div>
										</div>

										<div class="space-8"></div>

										<div class="form-group">
											<div class="col-xs-12 col-sm-4 col-sm-offset-2">
												<label>
													<input name="agree" id="agree" type="checkbox" class="ace" />
													<span class="lbl"> I accept the policy</span>
												</label>
											</div>
										</div>
										
										

										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-2 no-padding-right">Gender</label>

											<div class="col-xs-12 col-sm-9">
												<ul class="ace-thumbnails">
													<li>
														<a href="<{$SOURCE_Url}>images/gallery/image-1.jpg" title="Photo Title" data-rel="colorbox">
															<img alt="150x150" src="<{$SOURCE_Url}>images/gallery/thumb-1.jpg" />
															<div class="tags">
																<span class="label-holder">
																	<span class="label label-info">breakfast</span>
																</span>

																<span class="label-holder">
																	<span class="label label-danger">fruits</span>
																</span>

																<span class="label-holder">
																	<span class="label label-success">toast</span>
																</span>

																<span class="label-holder">
																	<span class="label label-warning arrowed-in">diet</span>
																</span>
															</div>
														</a>

														<div class="tools">
															<a href="#">
																<i class="icon-link"></i>
															</a>

															<a href="#">
																<i class="icon-paper-clip"></i>
															</a>

															<a href="#">
																<i class="icon-pencil"></i>
															</a>

															<a href="#">
																<i class="icon-remove red"></i>
															</a>
														</div>
													</li>

													<li>
														<a href="<{$SOURCE_Url}>images/gallery/image-2.jpg" data-rel="colorbox">
															<img alt="150x150" src="<{$SOURCE_Url}>images/gallery/thumb-2.jpg" />
															<div class="text">
																<div class="inner">Sample Caption on Hover</div>
															</div>
														</a>
													</li>

													<li>
														<a href="<{$SOURCE_Url}>images/gallery/image-3.jpg" data-rel="colorbox">
															<img alt="150x150" src="<{$SOURCE_Url}>images/gallery/thumb-3.jpg" />
															<div class="text">
																<div class="inner">Sample Caption on Hover</div>
															</div>
														</a>

														<div class="tools tools-bottom">
															<a href="#">
																<i class="icon-link"></i>
															</a>

															<a href="#">
																<i class="icon-paper-clip"></i>
															</a>

															<a href="#">
																<i class="icon-pencil"></i>
															</a>

															<a href="#">
																<i class="icon-remove red"></i>
															</a>
														</div>
													</li>

													<li>
														<a href="<{$SOURCE_Url}>images/gallery/image-4.jpg" data-rel="colorbox">
															<img alt="150x150" src="<{$SOURCE_Url}>images/gallery/thumb-4.jpg" />
															<div class="tags">
																<span class="label-holder">
																	<span class="label label-info arrowed">fountain</span>
																</span>

																<span class="label-holder">
																	<span class="label label-danger">recreation</span>
																</span>
															</div>
														</a>

														<div class="tools tools-top">
															<a href="#">
																<i class="icon-link"></i>
															</a>

															<a href="#">
																<i class="icon-paper-clip"></i>
															</a>

															<a href="#">
																<i class="icon-pencil"></i>
															</a>

															<a href="#">
																<i class="icon-remove red"></i>
															</a>
														</div>
													</li>

													<li>
														<div>
															<img alt="150x150" src="<{$SOURCE_Url}>images/gallery/thumb-5.jpg" />
															<div class="text">
																<div class="inner">
																	<span>Some Title!</span>

																	<br />
																	<a href="<{$SOURCE_Url}>images/gallery/image-5.jpg" data-rel="colorbox">
																		<i class="icon-zoom-in"></i>
																	</a>

																	<a href="#">
																		<i class="icon-user"></i>
																	</a>

																	<a href="#">
																		<i class="icon-share-alt"></i>
																	</a>
																</div>
															</div>
														</div>
													</li>

													<li>
														<a href="<{$SOURCE_Url}>images/gallery/image-6.jpg" data-rel="colorbox">
															<img alt="150x150" src="<{$SOURCE_Url}>images/gallery/thumb-6.jpg" />
														</a>

														<div class="tools tools-right">
															<a href="#">
																<i class="icon-link"></i>
															</a>

															<a href="#">
																<i class="icon-paper-clip"></i>
															</a>

															<a href="#">
																<i class="icon-pencil"></i>
															</a>

															<a href="#">
																<i class="icon-remove red"></i>
															</a>
														</div>
													</li>

													<li>
														<a href="<{$SOURCE_Url}>images/gallery/image-1.jpg" data-rel="colorbox">
															<img alt="150x150" src="<{$SOURCE_Url}>images/gallery/thumb-1.jpg" />
														</a>

														<div class="tools">
															<a href="#">
																<i class="icon-link"></i>
															</a>

															<a href="#">
																<i class="icon-paper-clip"></i>
															</a>

															<a href="#">
																<i class="icon-pencil"></i>
															</a>

															<a href="#">
																<i class="icon-remove red"></i>
															</a>
														</div>
													</li>

													<li>
														<a href="<{$SOURCE_Url}>images/gallery/image-2.jpg" data-rel="colorbox">
															<img alt="150x150" src="<{$SOURCE_Url}>images/gallery/thumb-2.jpg" />
														</a>

														<div class="tools tools-top">
															<a href="#">
																<i class="icon-link"></i>
															</a>

															<a href="#">
																<i class="icon-paper-clip"></i>
															</a>

															<a href="#">
																<i class="icon-pencil"></i>
															</a>

															<a href="#">
																<i class="icon-remove red"></i>
															</a>
														</div>
													</li>
												</ul>
											</div>
										</div>
										
									</form>
								</div> 
							</div>
							
							
							<div class="hr hr-dotted"></div>  
							<div class="row-fluid wizard-actions">
								<button class="btn btn-prev">
									<i class="icon-arrow-left"></i>
									Prev
								</button>

								<button class="btn btn-success btn-next" data-last="Finish ">
									Next
									<i class="icon-arrow-right icon-on-right"></i>
								</button>
							</div>

						</div> 	
									
					</div>
 
				</div><!-- /.col -->
			</div><!-- /.row -->
			 


		</div><!-- /.page-content --> 
  
	</div><!-- /.main-container -->
</div>
<{include file="element/js_lib.html"}>
<script language="javascript">
	$(function(){
			$('input[name=date-range-picker]').daterangepicker().prev().on(ace.click_event, function(){
					$(this).next().focus();
				});

			$(".chosen-select").chosen(); 
		});
</script>

<script type="text/javascript">
	jQuery(function($) {
			var oTable1 = $('#sample-table-2').dataTable( {
					"aoColumns": [
						{ "bSortable": false},
						null, null,null, null, null,
						{ "bSortable": false}
					]});
			
			
			$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
							this.checked = that.checked;
							$(this).closest('tr').toggleClass('selected');
						});
					
				});
		
		
			$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
			
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('table')
				var off1 = $parent.offset();
				var w1 = $parent.width();
		
				var off2 = $source.offset();
				var w2 = $source.width();
		
				if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
				return 'left';
			}
			
			function showErrorAlert (reason, detail) {
				var msg='';
				if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail;}
				else {
					console.log("error uploading file", reason, detail);
				}
				$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ 
					'<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
			}
			var ue = UE.getEditor('editor');

			$('.btn-next').click(function(){
				bootbox.prompt("请输入标题:", function(title) { 
					if (title !== '') {
						console.log(title);
					}else{
						bootbox.alert('请输入标题');
					}
				});
				
			});


		})
</script> 
